<!DOCTYPE html>
<html>
    <head>
        <script src='../../../../build/yui/yui-min.js'></script>

        <script>

            YUI({
                base: '../../../../build/',
                debug: true,
                combo: false,
                filter: 'raw',
            }).use('button-base', 'button-group', 'cssbutton', 'cssfonts', 'console', function(Y){

                new Y.Console().render();

                var ButtonFactory = Y.Plugin.Button.factory;
                var ToggleFactory = Y.ToggleButton;

                Y.log('A ninja button called ' + new ButtonFactory({label:'Bruce Lee'}).getContent());

                /*
                    Just a basic test with a listener
                */
                var button = new ButtonFactory({
                    srcNode: Y.one('#event')
                });

                button.on("click", function(e){
                    Y.log("click");
                });


                /*
                    A 'toggle' button listening for the selectedChange event
                */
                var button2 = new ToggleFactory({
                    srcNode: Y.one('#toggle'),
                    on: {
                        selectedChange:function(){
                           Y.log('selectedChange');
                        }
                    }
                }).render();

                /*
                    A 'link' button
                    Preferably, the user would just apply a yui3-button style to an <a> element and not use JS
                */
                var button3 = new ButtonFactory({
                    srcNode: Y.one('#link')
                });







                /*
                    A disabled button
                */
                var button4 = new ButtonFactory({
                    srcNode: Y.one('#disabled'),
                    disabled: true
                });







                /*
                    A group of checkbox-like buttons
                */
                var buttonGroup2 = new Y.ButtonGroup({
                    srcNodes: Y.all('.multigroup'),
                    type: 'checkbox'
                });

                buttonGroup2.after('selectionChange', function(e){
                    var selection = buttonGroup2.getSelectedButtons();
                    Y.log('buttonGroup2 selected count = ' + selection.length);
                });




                /*
                    A group of radio-like buttons
                */
                var buttonGroup = new Y.ButtonGroup({
                    srcNodes: Y.all('.group'),
                    type: 'radio'
                });

                buttonGroup.after('selectionChange', function(e){
                    Y.log('buttonGroup selection changed');
                });











                /*
                    A button generator
                    Y.Buttons adds nothing useful for the gernator buttons, so just add the class and a listener.
                */
                Y.all('.generator').addClass('yui3-button').on('click', function(e){
                    var button, type, config, Factory;

                    type = e.target.getAttribute('data-type');
                    srcNode = Y.Node.create('<button>' + type + '</button>');
                    Y.one('#generated').append(srcNode);

                    config = {
                        label: type,
                        disabled: false,
                        srcNode: srcNode
                    };

                    if (type === 'disabled') {
                        Factory = Y.Button;
                        config.disabled = true;
                    }
                    else if (type === 'push') {
                        Factory = Y.Button;
                    }
                    else if (type === 'toggle') {
                        Factory = Y.ToggleButton;
                    }

                    button = new Factory(config);
                    button.render();
                });

            });
        </script>
    </head>

    <body class='yui3-skin-sam'>

        <div id='yconsole'></div>

        <h1>Button prototype</h1>

        <hr />

        <h2>Event</h2>
        <button id='event' tabindex='3'>Log  <br /> a message</button>


        <br>


        <h2>Toggle w/ event</h2>
        <input type='button' id='toggle' value='Toggle'></input>


        <br>


        <h2>Link</h2>
        <a href='http://yahoo.com' id='link'>Go to yahoo.com</a>


        <h2>Disabled</h2>
        <button id='disabled'>Should be disabled</button>


        <br>


        <h2>Multi-Group (checkbox)</h2>
        <button class='multigroup' id='btn4'>Button 4</button>
        <button class='multigroup' id='btn5'>Button <br /> 5</button>
        <button class='multigroup' id='btn6'>Button <br /> <br /> 6</button>


        <br>


        <h2>Group (radio)</h2>
        <button class='group' id='btn1'>Button 13</button>
        <button class='group' id='btn2'>Button 27</button>
        <button class='group' id='btn3'>Button 40</button>


        <br>


        <h2>Generator</h2>
        <button class='generator' data-type='push'>Generate Push Button</button>
        <button class='generator' data-type='toggle'>Generate Toggle Button</button>
        <button class='generator' data-type='disabled'>Generate Disabled Button</button>
        <div id='generated' style='border:solid black 1px;'></div>

    </body>
</html>
